<template>
  <div class="router-template">
    <div v-if="power">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span> 生成PDF抽样通知单和委托书</span>
          <el-button style="float: right" size="mini" @click="qxClick">省局权限</el-button>
        </div>
        <div>
          <el-form>
            <el-form-item>
              <el-button @click="toAddNotice">点击生成PDF抽样通知单</el-button>
              <el-button @click="toAddProxy">点击生成PDF抽样委托书</el-button>
              <div>
                <img src="/static/001.png" alt="" v-show="isNow" width="300"/>
                <img src="/static/002.png" alt="" v-show="isNow2" width="300"/>
              </div>
            </el-form-item>
          </el-form>

        </div>


      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span> 批量打印抽样通知单和委托书</span>
          <el-button style="float: right" size="mini" @click="qxClick">省局权限</el-button>
        </div>
        <div>
          <el-form>
            <el-form-item>
              <!--<el-button @click="toDownload">批量打印抽样通知单和委托书</el-button>-->
              <el-table
                :data="tableData2"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="date"
                  label="名称"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="单位"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="地址">
                </el-table-column>
                <el-table-column header-align="center" label="操作" width="200" fixed="right" align="center">
                  <template slot-scope="scope">
                    <el-button @click="DownLoad(scope.$)" size="small">
                      打印
                      <a href="javascript:;" download="" id="download" style="display: none;">下载</a>
                    </el-button>
                    <el-button @click="downLoadAll(scope)" size="small">
                      全部打印
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-form>
        </div>
      </el-card>

      <el-card class="box-card" style="width: 70%;float: left; min-height:43vh;">
        <div slot="header" class="clearfix">
          <span> 通过Excel导入检验结果</span>
          <el-button style="float: right" size="mini" @click="qxClick">省局权限</el-button>

        </div>
        <el-table
          border
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column
            prop="name"
            label="名称">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
            <template slot-scope="scope">
              <a :href="scope.row.address"
                 style="margin-left: 10px;color: red;text-decoration:underline">{{scope.row.address}}</a>
            </template>
          </el-table-column>
          <el-table-column
            prop="file"
            label="文件名">
          </el-table-column>
          <el-table-column
            prop="stauts"
            label="状态">
            <template slot-scope="scope">
              <div v-if="scope.row.stauts===0">
                <el-tag>已上传</el-tag>
              </div>
              <div v-if="scope.row.stauts===1">
                <el-tag type="success">通过</el-tag>
              </div>
              <div v-if="scope.row.stauts===2">
                <el-tag type="danger">驳回</el-tag>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-form>
          <el-form-item>
            <el-button v-show="isImport" @click="toImport">将导入结果上报给省局</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="box-card" style="width: 29%;margin-left: 71%; min-height:40vh;">
        <div slot="header" class="clearfix">
          <span>上传Excel导入检验结果</span>
        </div>
        <el-upload
          class="upload-demo"
          drag
          ref="upload"
          action="https://jsonplaceholder.typicode.com/posts/"
          :file-list="fileList"
          :on-success="successFun"
          :on-error="toError"
          :before-upload="beforeExcelUpload"
          :auto-upload="false">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
        <el-button v-show="isShow" style="margin-left: 10px;" size="small" type="success"><a
          href="/static/fileerror.xls" download="错误文件信息.xls" @click="downloadErrorFile">下载错误文件信息</a></el-button>

      </el-card>
    </div>
    <div v-else>
      <el-card class="box-card" style="height: 80vh">
        <div slot="header" class="clearfix">
          <el-button style="float: right" size="mini" @click="qxClick(1)">技术机构权限</el-button>
          <span>承诺书审核</span>
        </div>
        <el-table
          border
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="name"
            label="名称">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
            <template slot-scope="scope">
              <a :href="scope.row.address"
                 style="margin-left: 10px;color: red;text-decoration:underline">{{scope.row.address}}</a>
            </template>
          </el-table-column>
          <el-table-column
            prop="file"
            label="文件名">
          </el-table-column>
          <el-table-column
            prop="stauts"
            label="状态">
            <template slot-scope="scope">
              <div v-if="scope.row.stauts===0">
                <el-tag>等待</el-tag>
              </div>
              <div v-if="scope.row.stauts===1">
                <el-tag type="success">通过</el-tag>
              </div>
              <div v-if="scope.row.stauts===2">
                <el-tag type="danger">驳回</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column header-align="center" label="操作" width="200" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button @click="yesClick(scope.$index)" size="small">
                审核通过
              </el-button>
              <el-button @click="noClick(scope.$index)" size="small">
                驳回
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>


  </div>
</template>
<script>
  export default {
    data() {
      return {
        power: true,
        isShow: false,
        isImport: false,
        isNow: false,
        isNow2: false,
        tableData: [
          {
            name: 'XXX',
            address: 'url',
            file: "xx.doc",
            stauts: 0
          }
        ],
        fileList: [],
        tableData2: []
      };
    },
    methods: {
      qxClick() {
        this.power = !this.power;
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      successFun(response, file, fileList) {
        console.log(response, file, fileList);
        this.tableData.push({name: 'XXX', address: file.url, file: file.name, stauts: 0})

      },
      beforeExcelUpload(file) {
        let xls = file.name.split('.')
        if (xls[0].startsWith('测试')) {
          this.$message.error('上传Excel文件错误')
          this.isShow = true
          return false
        }
        this.isShow = false
        return file
      },
      toChangeStatus(num) {
        console.log(num)
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      yesClick(index) {
        this.tableData[index].stauts = 1
      },
      noClick(index) {
        this.tableData[index].stauts = 2
      },
      DownLoad(data) {
        // console.log(data.$index);
        // let n = data.$index;
        alert('打印成功！')
        // if(this.tableData2[n].date == '抽样通知单'){
        //   alert(1)
        //   var oA = document.getElementById('download');
        //   oA.href = '/static/001.png';
        //   oA.download = '抽样通知单.pdf'
        //   oA.click();
        // }
        // if(this.tableData2[n].date == '抽样委托书'){
        //   alert(2)
        //   var oA = document.getElementById('download');
        //   oA.href = '/static/002.png';
        //   oA.download = '抽样委托书.pdf'
        //   oA.click();
        // }

      },
      downLoadAll() {
        alert('所有文件打印成功')
      },
      downloadErrorFile(){
        this.$message.success('下载错误文件成功')
        this.isShow = !this.isShow
      },
      toAddNotice() {
        // alert('生成PDF抽样委托书成功!');
        this.isNow = true;
        this.tableData2.push({
          date: '抽样通知单',
          name: '×××',
          address: '××××××'
        })
      },
      toAddProxy() {
        // alert('生成PDF抽样委托书成功!');
        this.isNow2 = true;
        this.tableData2.push({
          date: '抽样委托书',
          name: '×××',
          address: '××××××'
        })
      },
      toDownload() {
        window.print();
      },
      ImportResult(response, file, fileList) {
        console.log(response)
        this.isImport = true;
        this.isShow = false;
        this.isImport = true;
        alert('导入成功');
      },
      toError() {
        alert('导入失败');
        this.isShow = true;
      },
      toExport() {
        alert('下载标明错误行和原因的Excel文件成功！')
      },
      toImport() {
        this.$confirm('此操作将上报此任务, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '上报成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消上报'
          });
        });
      },
      open2() {
        this.$confirm('此操作将撤销此任务, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '撤销成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消撤销'
          });
        });
      }
    }
  };
</script>

<style scoped>
  .box-card {
    margin-bottom: 30px;
  }

  a {
    text-decoration: none;
    color: white;
  }
</style>
